<!--智能导诊-->
<template>
	<view>
		<view class="box">
			<view class="switch_box">
				<view class="switch">
					<view v-for="(item,index) in navArray" :key="index" :class="item.className" @click="cut(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="attributes">
				<view class="ages left">
					<label>年龄</label>
					<view class="ageScope">成人</view>
				</view>
				<view class="sex right">
					<view v-for="(item,index) in sexArray" :key="index" :class="item.className" @click="sexChecked(index)">
						{{item.title}}
					</view>
					<!-- <view class="left girl sex" @click="sexChecked(2)">女</view> -->
				</view>
			</view>
			<view class="tips">
				{{tips}}
			</view>
			<view class="person_box">
				<view class="right overturn" @click="turn()">
					{{overturnText}}
				</view>
				<view class="person_image">
					<view class="person">
						<view class="head"></view>
						<view class="image" :style="'background-image: url('+personImage+');'"></view>
					</view>
					<view class="shadow"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips:"该功能暂未启用，敬请期待",
				range:"adult",//是否成人
				sex:1,
				overturn:1,//正反面
				overturnText:"正面",
				personImage:"../../static/299@2x.png",
				navArray:[
					{title:"成人",className:"lables checked",type:"adult"},
					{title:"儿童",className:"lables ",type:"child"},
				],
				sexArray:[
					{title:"",className:"left man sex checked",value:1},
					{title:"",className:"left woman sex",value:2}
				]
			}
		},
		methods: {
			cut(index){
				for(let item in this.navArray){
					this.navArray[item].className="lables";
				}
				this.navArray[index].className="lables checked";
				this.range=this.navArray[index].type;
				this.cutPerson();
			},
			sexChecked(index){
				for(let item in this.sexArray){
					this.sexArray[item].className=this.sexArray[item].className.replace(/ checked/ig,"");
				}
				this.sexArray[index].className+=" checked";
				this.sex=this.sexArray[index].value;
				this.cutPerson();
			},
			turn(){
				if(this.overturn==1){
					this.overturn=2;
					this.overturnText="反面";
				}else{
					this.overturn=1;
					this.overturnText="正面";
				}
				this.cutPerson();
			},
			cutPerson(){
				if(this.range=="adult"&&this.sex==1&&this.overturn==1){
					this.personImage="../../static/299@2x.png";
				}else if(this.range=="adult"&&this.sex==2&&this.overturn==1){
					this.personImage="../../static/302@2x.png";
				}else if(this.range=="child"&&this.sex==1&&this.overturn==1){
					this.personImage="../../static/314@2x.png";
				}else if(this.range=="child"&&this.sex==2&&this.overturn==1){
					this.personImage="../../static/284@2x.png";
				}else if(this.range=="adult"&&this.sex==1&&this.overturn==2){
					this.personImage="../../static/300@2x.png";
				}else if(this.range=="adult"&&this.sex==2&&this.overturn==2){
					this.personImage="../../static/301@2x.png";
				}else if(this.range=="child"&&this.sex==1&&this.overturn==2){
					this.personImage="../../static/286@2x.png";
				}else if(this.range=="child"&&this.sex==2&&this.overturn==2){
					this.personImage="../../static/285@2x.png";
				}
			}
		}
	}
</script>

<style>
.box{
	width: 98%;
	margin: 0 auto;
}
.tips{
	float: left;
	padding-top: 20px;
}
.switch_box{
	float: left;
	width: 100%;
	/*position: relative;*/
	margin-top: 20px;
	height: 36px;
}
.switch{
	background-color: #FFFFFF;
	border: 1px solid #007AFF;
	box-shadow: 1px 1px 5px #007AFF;
	border-radius: 50px;
	width: 130px;
	height: 100%;
	font-size: 16px;
	margin: 0 auto;
	
}
.checked{
	transform:rotateY(300);
	background-color: #007AFF;
	color: #FFFFFF;
	border-radius: 50px;
	
}
.lables{
	float: left;
	width: 50%;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}
.attributes{
	float: left;
	width: 100%;
	margin-top: 20px;
}
.attributes .ages{
	display: flex;
	background-color: #FFFFFF;
	padding: 15px;
	border-radius:0px 15px 15px 0px ;
	align-items: center;
}
.attributes .ages .ageScope{
	background-color: #EBEBEB;
	padding: 5px;
	margin-left: 15px;
	padding-left: 30px;
	padding-right: 30px;
}
.attributes .sex{
	background-color: #FFFFFF;
	padding: 15px;
}
.attributes .sex .sexs{
	
}
.attributes .sex .man{
	color:#007AFF;
	background-image: url(../../static/person/337@2x.png);
	background-size: 100% 100%;
}
.attributes .sex .woman{
	color:#ffaaff;
	background-image: url(../../static/person/316@2x.png);
	background-size: 100% 100%;
}
.attributes .sex .checked{
	background-color: #E6E6E6;
	border-radius: 5px;
}
.person_box{
	width: 100%;
	height: 500px;
	background-color: #FFFFFF;
	float: left;
	margin-top: 20px;
	position: relative;
}
.person_box .overturn{
	width: 46px;
	height: 62px;
	background:#F0F0F0;
	border-radius: 4px;
	position: absolute;
	right: 10px;
	top:10px;
	color: #666666;
	line-height: 90px;
	text-align: center;
	font-size: 12px;
	background-image: url(../../static/318@2x.png);
	background-repeat:  no-repeat;
	background-size: 24px 24px;
	background-position: center 8px;
	border: 1px solid #E1E1E1;
}
.person_image{
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 10px;
}
.person_image .person{
	height: 90%;
	width: 50%;
	margin: 0 auto;
	display: grid; 
	    
}
.person_image .person .image{
	height: 100%;
	z-index: 99;
    background-position: center bottom; 
	background-size: contain; 
	background-repeat: no-repeat;
}
.person_image .shadow{
	width: 157px;
	height: 48px;
	background: radial-gradient(circle, #868686 0%, rgba(111, 111, 111, 0) 100%);
	border-radius: 50%;
	margin: 0 auto;
	margin-top: -35px;
	filter: blur(3px); 
	z-index: -1;
}
.person .head{
	position: absolute;
	background-color: red;
	z-index: 9999;
	width: 20px;
	height: 20px;
}

</style>
